<template>
  <div>
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header" class="textalinecenter">
        <span>首页轮播图编辑</span>
        <div>
          <el-button
              type="primary"
              :icon="'el-icon-edit'"
              circle
              @click="edit_swiper"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-plus"
              circle
              @click="add_swiper"
              v-if="!swiper_is_show"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-check"
              circle
              v-else
              @click="save_swiper"
            ></el-button>
        </div>
      </div>
      <div v-if="swiper_is_show">
        <el-upload
          action="https://zyc618.mynatapp.cc/api/files/uploads/"
          :on-success="swiper_success"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :limit="4"
          :on-remove="handleRemove">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
      </div>
      <div v-else class="textalinecenter">
        <el-carousel indicator-position="outside"  style="width: 470px; height: 100%" >
        <el-carousel-item v-for="item in showswiper" :key="item.id" >
          <el-image
            style="width: 470px; height: 100%"
            :src="baseurl+ item"
            :prediv-src-list="showswiper"
            fit="cover "
          ></el-image>
        </el-carousel-item>
      </el-carousel>
      </div>
    </el-card>
    
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>首页图标编辑</span>
      </div>
      <div style="display: flex">
      <div v-for="(item, index) in picboxi" :key="index">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <el-image
            style="width: auto; height: 100px"
            :src="baseurl + item.img"
            fit="scale-down"
          ></el-image>
          <div style="padding: 14px">
            <span>{{ item.title }}</span>
            <div class="bottom clearfix">
              <el-button style="color: #9c446e;font-weight: 800;" type="text" class="button" @click="edit_five(item)">编辑按钮</el-button>
            </div>
          </div>
          <!-- card body -->
        </el-card>
      </div>
     
      
    </div>
    </el-card>
    
    <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header" class="textalinecenter">
            <span>抓住孩子关键成长期</span>
            <el-button
              type="primary"
              :icon="'el-icon-edit'"
              circle
              @click="edit_catch_key"
            ></el-button>
        </div>
        <div style="display: flex;">
            <el-image
            style="width: auto; height: 50%"
            :src="baseurl+pd_top_lg_img[0]"
            :prediv-src-list="pd_top_lg_img"
            fit="scale-down"
          ></el-image>
          <el-image
            style="width: auto; height: 50%"
            :src="baseurl+pd_top_lg_img[1]"
            :prediv-src-list="pd_top_lg_img"
            fit="scale-down"
          ></el-image>
        </div>
        <el-dialog
          title="抓住孩子关键成长期"
          :visible.sync="dialogVisible"
          width="85%"
          :before-close="handleClose1"
          >
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">第一组</el-col>
              <el-col :span="12" :offset="0">第二组</el-col>
            </el-row>
            
          </el-card>
          
          <el-card shadow="always" :body-style="{ padding: '20px' }">
            <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-image
            style="width: auto; height: 50%"
            :src="baseurl+ pd_top_lg_img[0]"
            :prediv-src-list="pd_top_lg_img"
            fit="scale-down"
          ></el-image>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-image
            style="width: auto; height: 50%"
            :src="baseurl+pd_top_lg_img[1]"
            :prediv-src-list="pd_top_lg_img"
            fit="scale-down"
          ></el-image>
            </el-col>
          </el-row>
          </el-card>
          
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
            
              <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          :limit="1"
          action="https://zyc618.mynatapp.cc/api/files/uploads"
          :file-list="fileList"
          :on-success="handleAvatarSuccess_left"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将成长期第一张图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
            </el-col>
            <el-col :span="12" :offset="0">
            
              <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          :limit="1"
          action="https://zyc618.mynatapp.cc/api/files/uploads"
          :file-list="fileList"
          :on-success="handleAvatarSuccess_right"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将成长期第二张图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
            </el-col>
          </el-row>
          
         
       

          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="rightsave">确 定</el-button>
          </span>
        </el-dialog>
          <div v-for="(item,index) in pd_top_lg" :key="index">
            <el-card shadow="always" :body-style="{ padding: '20px' }">
              <div slot="header" class="textalinecenter">
                <span :style="{'color':item.color}" v-if="!item.show">{{ item.title }}</span>
                <el-input v-model="item.title" v-else></el-input>
               <div>
                <el-button
                v-if="!item.show"
                type="primary"
                :icon="'el-icon-edit'"
                circle
                @click="edit_son_pd_top_lg(item.id)"
              ></el-button>
              <el-button
              v-else
                type="success"
                :icon="'el-icon-check'"
                circle
                @click="save_son_pd_top_lg(item)"
              ></el-button>
               </div>
              </div>
              <!-- card body -->
              
               <div v-if="!item.show">{{ item.content }}</div>
               <el-input v-else v-model="item.content" type="textarea"></el-input>
            </el-card>
            
            
          </div>
      </el-card>
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header" class="textalinecenter">
            <span>亲子课程介绍</span>
            <div>
              <el-button
              type="primary"
              :icon="'el-icon-edit'"
              circle
              @click="edit_introduce"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-plus"
              circle
              @click="add_introduce_header"
              v-if="!introduce_show"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-check"
              circle
              v-else
              @click="save_introduce_header"
            ></el-button>
            </div>
        </div>
        <div>
          <el-input v-model="introducetitle" placeholder="请输入标题" v-show="introduce_show"></el-input>
        </div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-for="(item,index) in bot" :key="index">
           <div class="bot-item-title">
                <span v-if="! item.show">
                    {{ item.title }}
                </span>
                <el-input v-model="item.title" v-else></el-input>
                <span><el-button type="primary" icon="el-icon-edit" circle v-if="! item.show" @click="edit_introduce_son(item.id)"></el-button>
                <el-button type="success" icon="el-icon-check" circle v-else @click="save_introduce(item)"></el-button></span>
            </div>
        </el-card>
        
      </el-card>
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header" class="textalinecenter">
            <span>陆大成长领域</span>
            <el-button
              type="primary"
              :icon="'el-icon-edit'"
              circle
              @click="edit_fivetitle"
            ></el-button>
            
        </div>
        <div class="">
            <div class="sm">
                依托于中国个个高校的学术背景，
            </div>
            <div class="sm">
                以浸入式汉语为主线，
            </div>
            <div class="sm">
                结合中国教育部层次教育理念,
            </div>
            <div class="sm">
                蒙台梭利教育方法贯穿7大成长领域,
            </div>
            <div class="sm">
                进行以能力素养为导向的游戏、自由探索、体验式学习
            </div>
        </div>
        <div style="display: flex;" >
        <el-card shadow="always" :body-style="{ padding: '20px' }" v-for="(item, index) in grow3all" :key="index">
          <el-image
            style="width: 120px; height: 120px;border-radius: 50%;"
            :src="baseurl+item.img"
            fit="scale-down"
            
          ></el-image>
          <div style="padding: 14px">
            <span>{{ item.title }}</span>
            <div class="bottom clearfix">
              <el-button type="text" class="button" @click="edit_five(item)">编辑按钮</el-button>
            </div>
          </div>
          <!-- card body -->
        </el-card>
      </div>

      </el-card>
      <el-card shadow="always" :body-style="{ padding: '20px' }">
        <div slot="header" class="textalinecenter">
            <span>亲子课多 趣味多</span>
           <div>
            <el-button
              type="primary"
              :icon="'el-icon-edit'"
              circle
              @click="edit_header"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-plus"
              circle
              @click="add_header"
              v-if="!pickboxtitle_show"
            ></el-button>
            <el-button
              type="danger"
              icon="el-icon-check"
              circle
              v-else
              @click="save_header"
            ></el-button>
           </div>
        </div>
        <div>
          <el-input v-model="pickboxtitle" placeholder="标题" v-show="pickboxtitle_show"></el-input>
        </div>
        <div v-for="(item,index) in pickbox" :key="index">
            <el-card shadow="always" :body-style="{ padding: '20px' }" >
              <div class="textalinecenter">
                <span :style="{'color' : item.color}" v-if="! item.show">{{ item.title }}</span>
                <el-input v-model="item.title" v-else></el-input>
                <el-button type="primary" icon="el-icon-edit" circle v-show="! item.show" @click="edit_pickbox(item.id)"></el-button>
                <el-button type="success" icon="el-icon-check" circle v-show="item.show" @click="save_pickbox(item)"></el-button>
              </div>
              
            </el-card>
            
        </div>
      </el-card>
      <el-drawer
        :title="row_s.id>6? '陆大成长领域`' :'图标库icon `'      +row_s.title + '` 编辑'"
        :visible.sync="drawer"
        direction="ttb"
        size="80%"
        :before-close="handleClose">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          {{ row_s.id }}
          <el-button style="color: #FFF;background-color: #9c446e;" @click="row_s.id <= 6? save_five():save_picboxi()">上传`存档`<i class="el-icon-upload el-icon--right"></i></el-button>
        </el-card>
        
        
        <el-card shadow="always" :body-style="{ padding: '20px' }">
                  <el-input v-model="row_s.title"></el-input>

        </el-card>
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-image
              style="width: auto; height: 180px"
              :src="baseurl+row_s.img"
              fit="fit"></el-image>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-upload
          class="upload-demo"
          drag
          list-type="picture"
          :limit="1"
          action="https://zyc618.mynatapp.cc/api/files/uploads"
          :file-list="fileList"
          :on-success="handleAvatarSuccess_img"
          multiple
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将封面图片拖到此处，或<em>点击上传</em></div>
        </el-upload>
            </el-col>
          </el-row>
          
        </el-card>
        <div>

          
        </div>
       
      </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rIcons: [],
      pickbox: [],
      picboxi:[],
      bot: [],
      showswiper: [],
      baseurl: "https://zyc618.mynatapp.cc/",
      pd_top_lg:[],
      pd_top_lg_img:[],
          grow3all:[],
          pickboxtitle:"",
          pickboxtitle_show:false,
          introducetitle:"",//亲子课程介绍
          introduce_show:false,//
          row_s:{},drawer:false,
          fileList:[],
          dialogVisible :false,
          swiper_is_show:false,
          dialogImageUrl:""//照片墙回调
    };
  },
  methods: {
    //获取所有的数据:
    async getall(){
      let result = await this.$API.editindex.getall_editindex();
      if(result.code == 200){
        this.pickbox = result.data.pickbox;
        this.bot = result.data.bot;
        this.pickbox.forEach(obj =>{
          //主要响应式
          this.$set(obj, 'show', false);
        })
        this.bot.forEach(obj =>{
          this.$set(obj,'show',false);
       })
       this.grow3all = result.data.grow3all;
       //抓住关键期
       this.pd_top_lg = result.data.pd_top_lg;
       this.pd_top_lg_img = JSON.parse(result.data.pd_top_lg_img);
       this.pd_top_lg.forEach(obj =>{
          //主要响应式
          this.$set(obj, 'show', false);
        })
      }
    },
    async getswiper_index(){
      let result = await this.$API.editindex.getindex_swiper();
      if(result.code == 200){
        
        this.showswiper = JSON.parse(result.data.showswiper);
        console.log(this.showswiper);
      }
    },
    generateColor() {
        // 生成随机的十六进制颜色
        const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
       return randomColor;
    },
    async getalldata() {
      
      
    },
    async getindexIcons() {
      let result = await this.$API.editindex.getindexIcons();
      this.picboxi = result.data;
      console.log(this.picboxi);
    },
    //亲子课多
    edit_header(){
      this.$message({
            message:"权限不够!禁止编辑",
            type:"error"
        })
    },
    add_header(){
      this.pickboxtitle_show = !this.pickboxtitle_show;
    },
    async save_header(){
      //发起请求
      //发起请求保存数据库
      let color = this.generateColor()
      let result = await this.$API.editindex.save_header({
        title:this.pickboxtitle,
        color
      });
      if(result.code == 200){
        this.pickbox.push({
          id:result.data,
          color,
          title:this.pickboxtitle,
          show:false

        });
        this.pickboxtitle_show = !this.pickboxtitle_show;
        this.pickboxtitle = "";
        this.$message({
          message:"插入成功",
          type:"success"
        })
      }
      
    },
    //编辑更换状态
    edit_pickbox(index){
      let index_x = this.pickbox.findIndex(item=> item.id == index);
      this.pickbox[index_x].show = !this.pickbox[index_x].show;
    },
    async save_pickbox(item){
      let result = await this.$API.editindex.save_pickbox({
        title:item.title,
        id:item.id
      });
      if(result.code == 200){
        this.$message({
          message:"编辑成功",
          type:"success"
        });
        this.edit_pickbox(item.id)
      }
    },
    //亲子课程介绍
    edit_introduce(){
      this.$message({
          message:"权限不够!禁止编辑",
          type:"error"
      })
    },
    //添加标题
    add_introduce_header(){
      this.introduce_show = !this.introduce_show;
    },
    //保存标题
    async save_introduce_header(){
      //发送数据库
      let result = await this.$API.editindex.save_introduce_header({
        title:this.introducetitle,
        
      });
      if(result.code == 200){
        this.bot.push({
          id:result.data,
          
          title:this.introducetitle,
          show:false

        });
        this.add_introduce_header();
        this.introducetitle="";
        this.$message({
          message:"插入成功",
          type:"success"
        })
      }
    },
    edit_introduce_son(index){
      //切换
      let index_x = this.bot.findIndex(item=> item.id == index);
      this.bot[index_x].show = !this.bot[index_x].show;
    },
    async save_introduce(item){
      //保存数据库:
      let result = await this.$API.editindex.save_introduce({
        title:item.title,
        id:item.id
      });
      if(result.code == 200){
        this.$message({
          message:"编辑成功",
          type:"success"
        });
        this.edit_introduce_son(item.id)
      }
    },
    edit_fivetitle(){
      this.$message({
        message:"权限不够,禁止添加",
        type:"error"
      })
    },
    edit_five(item){
      this.row_s = item;
      this.drawer = true;
    },
    handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    //上传图片回调:
    handleAvatarSuccess_img(res, file){
      if(res.code == 200){
        // let index_x = this.grow3all.findIndex(item=> item.id == index);
        // this.grow3all[index_x].img =this.baseurl +  res.data.url;
        this.row_s.img =  res.data.url;
      }
    },
    //保存发起请求:
    async save_five(){
      let result = await this.$API.editindex.save_five(this.row_s);
      if(result.code == 200){
        this.drawer = false;
        this.row_s = {};
        this.fileList = []
      }
    },
    async save_picboxi(){
      let result = await this.$API.editindex.save_indexicons(this.row_s);
      if(result.code == 200){
        this.drawer = false;
        this.row_s = {};
        this.fileList = []
      }
    },
    edit_catch_key(){
      this.dialogVisible= true;
    },
    //
    handleAvatarSuccess_left(res,file){
      //更改第一个
      if(res.code == 200){
        
        this.pd_top_lg_img.push(res.data.url);
      }
    },
    //
    handleAvatarSuccess_right(res,file){
      if(res.code == 200){
        this.pd_top_lg_img.push(res.data.url);
      }
    },
    handleClose1(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            
            done();
          })
          .catch(_ => {});
      },
      async rightsave(){
        console.log(JSON.stringify(this.pd_top_lg_img));
        let result = await this.$API.editindex.rightsave(JSON.stringify(this.pd_top_lg_img));
        if(result.code == 200){
          this.$message({
            message:"保存成功",
            type:"success"
          })
          this.dialogVisible = true
        }
      },
      edit_son_pd_top_lg(index){
        let index_x = this.pd_top_lg.findIndex(item=> item.id == index);
      this.pd_top_lg[index_x].show = !this.pd_top_lg[index_x].show;
      },
      async save_son_pd_top_lg(item){
        let result = await this.$API.editindex.save_son_pd_top_lg(item);
        if(result.code == 200){
         this.$message({
          message:"编辑成功",
          type:"success"
         })
         this.edit_son_pd_top_lg(item.id)
        }
      },
      edit_swiper(){
        this.swiper_is_show = !this.swiper_is_show;
      },
      add_swiper(){
        this.$message({
          title:"权限不足,禁止添加"
        })
      },
      async save_swiper(){
        
        let result = await this.$API.editindex.save_swiper(JSON.stringify(this.showswiper));
        if(result.code == 200){
         this.$message({
          message:"保存轮播成功",
          type:"success"
         })
         this.swiper_is_show = false;
        }
      },
      //删除就重写
      handleRemove(file, fileList) {
        console.log(fileList[0].response.data.url);
        this.showswiper = fileList.map(item=>
          item.response.data.url
        )
      },
      //预览:
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      //不到四张就push:
      swiper_success(res){
        if(res.code == 200){
        
          this.showswiper.push(res.data.url);
        }
      }
  },
  created(){
    this.getalldata();
  },
  mounted() {
    this.getall()
    this.getindexIcons();
    this.getswiper_index()
  },
};
</script>

<style>
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.bot-item-title{
			font-size: 26rpx;
			color: #cd5a91;
			text-indent: 2em;
            display: flex;
            justify-content: space-between;
            align-items: center;
		}
        .sm{
		font-size: 24rpx;
		font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
		text-align: center;
		padding:5rpx 0;
    line-height: 30px;
	}
    .grow3img{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		
	}
  .textalinecenter{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
